<template>
  <div class="background-particles">
    <div class="particle particle-1"></div>
    <div class="particle particle-2"></div>
    <div class="particle particle-3"></div>
    <div class="particle particle-4"></div>
    <div class="particle particle-5"></div>
  </div>
</template>

<script setup lang="ts">
// 动态背景粒子组件
</script>

<style scoped lang="scss">
.background-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  border-radius: 50%;
  animation: float 8s ease-in-out infinite;
}

.particle-1 { 
  top: 15%; 
  left: 20%; 
  width: 120px; 
  height: 120px; 
  background: radial-gradient(circle, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.2) 70%, transparent 100%);
  animation-delay: 0s; 
}

.particle-2 { 
  top: 50%; 
  left: 75%; 
  width: 80px; 
  height: 80px; 
  background: radial-gradient(circle, rgba(72, 219, 251, 0.7) 0%, rgba(72, 219, 251, 0.25) 70%, transparent 100%);
  animation-delay: 2s; 
}

.particle-3 { 
  top: 75%; 
  left: 30%; 
  width: 100px; 
  height: 100px; 
  background: radial-gradient(circle, rgba(255, 159, 243, 0.6) 0%, rgba(255, 159, 243, 0.22) 70%, transparent 100%);
  animation-delay: 4s; 
}

.particle-4 { 
  top: 30%; 
  left: 70%; 
  width: 60px; 
  height: 60px; 
  background: radial-gradient(circle, rgba(254, 202, 87, 0.7) 0%, rgba(254, 202, 87, 0.25) 70%, transparent 100%);
  animation-delay: 1s; 
}

.particle-5 { 
  top: 10%; 
  left: 85%; 
  width: 70px; 
  height: 70px; 
  background: radial-gradient(circle, rgba(163, 230, 53, 0.6) 0%, rgba(163, 230, 53, 0.22) 70%, transparent 100%);
  animation-delay: 3s; 
}

@keyframes float {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg) scale(1); 
    opacity: 0.8; 
  }
  25% { 
    transform: translateY(-40px) rotate(90deg) scale(1.1); 
    opacity: 1; 
  }
  50% { 
    transform: translateY(-20px) rotate(180deg) scale(0.9); 
    opacity: 0.9; 
  }
  75% { 
    transform: translateY(40px) rotate(270deg) scale(1.05); 
    opacity: 0.95; 
  }
}
</style>